<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title> XXX送水公司后台管理系统</title>

    <!--Bootstrap固定框架-->
    <link rel='stylesheet' th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.css}">
    <link rel='stylesheet' th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap-theme.css}">
    <!--图标库-->
    <link rel='stylesheet' th:href='@{/css/material-design-iconic-font.min.css}'>
    <!--核心样式-->
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <style>
        .myWorkerImage{
            width:30px;
            height:30px;
            border:1px solid red;
        }
        #add,#sub {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 1px solid #ccc;
            text-align: center;
            line-height: 15px;
            margin-top: 3px;
            cursor:pointer;
        }
    </style>
    <script th:src="@{\webjars\jquery\3.3.1\jquery.js}"></script>
</head>
<body>

<div id="viewport">

    <!-- Sidebar
    客户列表页面使用th:replace属性替换成主菜单的侧边栏，让代码能够复用
    th:replace="waterMainMenu::sidebar"
    waterMainMenu表示主菜单页面的文件名称
    sidebar表示主菜单页面的片段名称
    -->
    <div id="sidebar" th:replace="waterMainMenu::sidebar">

    </div>

    <!-- Content -->
    <div id="content">
        <!--
th:replace="waterMainMenu::navbar"表示将nav标签里面所有的内容替换为主页面的navbar片段
        -->
        <nav class="navbar navbar-default" th:replace="waterMainMenu::navbar">

        </nav>
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="col-md-4">
                        <a class="btn btn-primary" th:href="@{/worker/preSaveWorker}">添加送水工</a>
                    </div>
                    <div class="col-md-8">
                        <form class="form-inline" th:action="@{/worker/searchWorker}">
                            <!--
                            th:value="${searchName}"  将后端回传的“客户名称”显示在搜索文本框的value属性中
                            这个value属性值是动态的
                           -->
                            <input type="text" th:value="${searchName}" class="form-control" th:name="workerName" placeholder="请输入送水工名称"/>
                            <input type="submit" class="btn btn-primary" name="search" value="搜索"/>
                        </form>
                    </div>
                </div>
                <div class="col-md-12">
                    <table class="table table-hover table-striped">
                        <thead>
                        <tr>
                            <td>送水工编号</td>
                            <td>送水工名称</td>
                            <td>送水工底薪</td>
                            <td>送水工提成</td>
                            <td>送水工照片</td>
                            <td>操作</td>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="worker : ${workerList}">
                            <td th:text="${worker.wid}"></td>
                            <td th:text="${worker.workerName}"></td>
                            <td>
                                <span id="sub" th:class="${worker.wid}">-</span>
                                <span id="salary" th:text="${worker.workerSalary}"></span>
                                <span id="add" th:class="${worker.wid}">+</span>
                            </td>
                            <td th:text="${worker.workerMoney}"></td>

                            <td>
                                <!--没有上传图像显示系统默认的图像
                                  th:if="${#strings.isEmpty(worker.workerImage)}"
                                  条件成立：表示没有上传图像，显示默认的图像
                                -->
                                <img class="myWorkerImage"
                                     th:if="${#strings.isEmpty(worker.workerImage)}"
                                     src="../../images/user.png" />
                                <!--条件成立：表示用户上传了图片，显示在服务器上显示上传图片-->
                                <img class="myWorkerImage"
                                     th:if="${not #strings.isEmpty(worker.workerImage)}"
                                     th:src="'http://localhost:8091/'+${worker.workerImage}"/>
                            </td>
                            <td>
                                <a class="glyphicon glyphicon-remove" th:href="@{'/worker/delWorker/'+${worker.wid}}">删除</a>
                                <a class="glyphicon glyphicon-edit" th:href="@{'/worker/preUpdateWorker/'+${worker.wid}}">编辑</a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>

        </div>
    </div>

</div>

</body>
<script>
    // $() 是一个jQuery对象，所有的jQuery代码都写在小括号里面
    $(function () {
        //为+号绑定“点击事件”
        // $("span[id=add]") 使用“元素属性”选择器，选择所有id=add的span元素，为其绑定事件
        $("span[id=add]").click(function () {
            // console.log(123)
            //获取送水工ID
            // 获取送水工的工资，然后+100，将调整后的工资重新设置到table表格中
            let workerid = $(this).attr("class");
            //  $(this).next() 获取+后面的一个元素
            //  $(this).next().text()获取+后面一个元素的文本(送水工工资)
            let workerSalary = $(this).prev().text();
            //计算调整之后的新工资
            workerSalary = parseInt(workerSalary);
            workerSalary += 100;
            //将新工资设置到页面
            $(this).prev().text(workerSalary);
            // 前端jQuery框架使用异步ajax技术向后端发起请求，将调整之后的工资更新到后端
            $.ajax({
                //前端发起的请求路径
                url:'/worker/adjustSalary',
                //前端封装的参数
                data:{
                    wid:workerid,
                    workerSalary:workerSalary
                },
                //请求方式
                method:'POST',
                //请求成功的回调函数
                success:function (data,status) {
                    if (data == "OK"){
                        alert("调整工资成功");
                    }  else {
                        alert("调整工资失败");
                    }
                }
            })
        })
        // $("span[id=add]") 使用“元素属性”选择器，选择所有id=add的span元素，为其绑定事件
        $("span[id=sub]").click(function () {
            let workerId = $(this).attr("class");
            let workerSalary = $(this).next().text();
            //计算调整之后的工资
            workerSalary = parseInt(workerSalary);
            workerSalary -= 100;
            //将新工资设置到页面
            $(this).next().text(workerSalary);
            // 前端jQuery框架使用异步ajax技术向后端发起请求，将调整之后的工资更新到后端
            $.ajax({
                url:'/worker/reduceSalary',
                data:{
                    wid:workerId,
                    workerSalary:workerSalary
                },
                //请求方式
                method:"POST",
                //请求成功的回调函数
                success:function (data,status) {
                    if (data == "OK") {
                        alert("调整工资成功");
                    } else {
                        alert("调整工资失败");
                    }
                }
            })
        })
    })
</script>
</html>